<template>
	<view class="container">
		<view class="header" style="background-image: url(../../static/header.png);"></view>
		<view class="content">
			<view class="h-header">
				<!-- 只需要同时动态展示其中的一行 -->
				<text>获取{{ cityArrTo[arr4].name }}政策隔离信息</text>
			</view>
			<view class="footer">
				<view class="blue">
					<view class="first">
						<image class="location" src="../../static/icon1.png" mode=""></image>
						<text>出发城市：</text>
					</view>
					<navigator url="#" class="second">
						<picker mode="selector" value="arr1" :range="provincArrFrom" range-key="name" @change="provincChangeFrom">
							<view>{{ provincArrFrom[arr1].name }}</view>
						</picker>
						<image class="down" src="../../static/down.png" mode=""></image>
					</navigator>
					<navigator url="#" class="third">
						<picker mode="selector" value="arr2" :range="cityArrFrom" range-key="name" @change="cityChangeFrom">
							<view>{{ cityArrFrom[arr2].name }}</view>
						</picker>
						<image class="down" src="../../static/down.png" mode=""></image>
					</navigator>
				</view>
				<view class="red">
					<view class="first">
						<image class="location" src="../../static/icon2.png" mode=""></image>
						<text>目的城市：</text>
					</view>
					<navigator url="#" class="second">
						<picker mode="selector" value="arr3" :range="provincArrTo" range-key="name" @change="provincChangeTo">
							<view>{{ provincArrTo[arr3].name }}</view>
						</picker>
						<image class="down" src="../../static/down.png" mode=""></image>
					</navigator>
					<navigator url="#" class="third">
						<picker mode="selector" value="arr4" :range="cityArrTo" range-key="name" @change="cityChangeTo">
							<view>{{ cityArrTo[arr4].name }}</view>
						</picker>
						<image class="down" src="../../static/down.png" mode=""></image>
					</navigator>
				</view>
				<view class="route">
					<view class="left">
						<image class="ico" src="../../static/icon3.png" mode=""></image>
						<text>出发路径:</text>
					</view>
					<!-- 只需要同时动态展示其中的一行 -->
					<view class="right">{{ fromName }}-{{ toName }}</view>
				</view>
				<view class="time">
					<view class="left">
						<image class="ico" src="../../static/icon4.png" mode=""></image>
						<text>更新时间:</text>
					</view>
					<!-- 只需要同时动态展示其中的一行 -->
					<view class="right" v-if="flag1">2021-6-10:10:10:10</view>
					<view class="right" v-else-if="!flag1">{{ policy.back_policy_date }}</view>
				</view>
				<view class="gl">
					<view class="left">
						<image class="ico" src="../../static/icon5.png" mode=""></image>
						<text>隔离政策:</text>
					</view>
				</view>
				<view class="detail">
					<!-- <view class="neirong" v-if="flag1">该市都是低风险区,持"河南健康码"可自由有序流动.但根据往往会日哦文化和禁赛了房间在空军机计算机...</view> -->
					<view class="details">{{policy.back_policy}}</view>
					<navigator class="cha" url="#" @click="detailsBtn()">查看详情>></navigator>
				</view>
				<view class="show"><text class="tuisong" url="#">订阅{{fromName}}->{{toName}}隔离信息,信息更新第一时间推送给您</text></view>
				<view class="mianze">免责说明:本页面信息仅提供参考,数据来源于官方.如要前往某地,可咨询当地社区办事处或当地政府.</view>
			</view>

			<view class="my-footer">
				<navigator url="#" class="share" @click="shareBtn()">分享</navigator>
				<navigator url="#" class="require" @click="requireBtn()">信息反馈</navigator>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			provincArrFrom: [{ name: '' }],
			cityArrFrom: [{ name: '' }],
			provincArrTo: [{ name: '' }],
			cityArrTo: [{ name: '' }],
			arr1: 0,
			arr2: 0,
			arr3: 0,
			arr4: 0,
			policy: '',
			fromName: '',
			toName: '',
			flag1: true,
			code: '',
			// index4_name1: '',
			// index4_name2: '',
		};
	},
	onLoad() {
		this.getProvincFrom();
		this.getProvincTo();		
	},
	methods: {
		// 点击获取查看详情信息
		detailsBtn(){
			let that = this;
			that.getProvincToM();
			setTimeout(function(){uni.navigateTo({
				url:"detail?policy=" +that.ccodeTo
			});
			}, 500)
		},
		// 点击底部导航栏的分享按钮
		shareBtn(){
			let that = this;
			that.getProvincToM();
			setTimeout(function(){uni.navigateTo({
				// url:"index4?policy=" + encodeURIComponent(JSON.stringify(this.policy))
				url:"share?policy=" + that.ccodeTo +"&share_name=" + that.fromName +"&share_names=" + that.toName
			});
			}, 500)
		},
		// 此函数是刚进页面不做任何操作的分享和查看详情请求的默认省份接口
		getProvincToM(){
			uni.request({
				url: 'http://epidemic.site.ximengnaikang.com/api/v1/area/provinces',
				method: 'GET',
				header: {
					'Contest-Type': 'application/json'
				},
				success: res => {
					this.provincArrTo = res.data.data;
					// console.log(this.provincArrTo, '目的省的接口');
					// console.log(this.provincArrTo[this.arr3].name, "能拿到")
					// 进入页面给一个默认的目的省份的code 当触发点击事件后会被参数覆盖 
					this.pcodeTo = this.provincArrTo[this.arr3].code;
					console.log(this.pcodeTo, "arr3能收到不")
					this.getCityToM();
				}
			});
		},
		// 此函数是刚进页面不做任何操作的分享和查看详情请求的默认市份接口
		getCityToM() {
			uni.request({
				url: 'http://epidemic.site.ximengnaikang.com/api/v1/area/provinces/' + this.pcodeTo,
				method: 'GET',
				header: {
					'Content-Type': 'application/json'
				},
				success: res => {
					this.cityArrTo = res.data.data;
					// 此处拿到目的市的默认名字显示在初始页面 此时this.arr4的值为data中的初始值0
					this.toName = this.cityArrTo[this.arr4].name;
					this.ccodeTo = this.cityArrTo[0].code;
					console.log(this.ccodeTo, "xinshicvheng");
					this.getDetailes()
				}
			});
		},
		// 点击底部导航栏的信息反馈按钮
		requireBtn(){
			uni.navigateTo({
				url:"input"
			})
		},
		// 获取出发地省接口
		getProvincFrom() {
			uni.request({
				url: 'http://epidemic.site.ximengnaikang.com/api/v1/area/provinces',
				method: 'GET',
				header: {
					'Contest-Type': 'application/json'
				},
				success: res => {
					this.provincArrFrom = res.data.data;
					console.log(res.data.data, '出发省的接口');
					// 进入页面给一个默认的出发省份的code 当触发点击事件后会被参数覆盖 此时this.arr1的值为data中的初始值0
					this.pcode = this.provincArrFrom[this.arr1].code;
					// console.log(this.provincArrFrom[this.arr1].name, "能拿到出发省的地名")
					this.getCityFrom();
				}
			});
		},
		// 点击出发省之后的picker监听事件
		provincChangeFrom: function(e) {
			
			if(e.detail&&e.detail.value || e.detail.value== 0){
				this.arr1 = e.detail.value;
				this.pcode = this.provincArrFrom[this.arr1].code;
				this.pName = this.provincArrFrom[this.arr1].name
				console.log(this.pName, "接收到此时的点击值的市区名字2222")
				console.log(this.arr1, "接收到此时的点击值")	
				console.log(this.provincArrFrom[this.arr1].name, "接收到此时的点击值的市区名字")
				// 点击出发省份的时候-->将出发省份的code传到出发市，此处调用出发市的接口（下边用this.变量名  就不用传参）
				this.getCityFrom();  //this.getCityFrom(this.pcode)              
			}else{
				this.pcode = this.provincArrFrom[0].code;
				this.pName = this.provincArrFrom[this.arr1].name
				console.log(this.pName, "接收到此时的点击值的市区名字33333")
				this.getCityFrom();  //this.getCityFrom(this.pcode)
				console.log(this.pcode, "接收到此时的默认值")	
			}
		},
		// 获取出发市的接口
		getCityFrom() {
			uni.request({
				url: 'http://epidemic.site.ximengnaikang.com/api/v1/area/provinces/' + this.pcode,
				method: 'GET',
				header: {
					'Content-Type': 'application/json'
				},
				success: res => {
					this.cityArrFrom = res.data.data;
					// 将点击过市之后的下标结束后每次都改为默认省会下标
					this.arr2 = 0;
					// 此处拿到出发市的默认名字显示在初始页面  此时this.arr2的值为data中的初始值0
					this.fromName = this.cityArrFrom[this.arr2].name;
					
				}
			});
		},
		// 点击出发市之后的picker监听事件
		cityChangeFrom: function(e) {
			// console.log(e.detail, '点击出发市按钮之后');
			// console.log(e.detail.value, "点击点击点击")
			if(e.detail.value&&e.detail){
				this.arr2 = e.detail.value;
				this.ccode = this.cityArrFrom[this.arr2].code;
				this.fromName = this.cityArrFrom[this.arr2].name;
			}else{
				this.ccode = this.cityArrFrom[0].code;
				this.fromName = this.cityArrFrom[0].name;
				console.log(this.ccode, '能拿到默认触发change出发市的code吗');
			}
		},
		// 获取目的地省接口
		getProvincTo() {
			uni.request({
				url: 'http://epidemic.site.ximengnaikang.com/api/v1/area/provinces',
				method: 'GET',
				header: {
					'Contest-Type': 'application/json'
				},
				success: res => {
					this.provincArrTo = res.data.data;
					// console.log(this.provincArrTo, '目的省的接口');
					// console.log(this.provincArrTo[this.arr3].name, "能拿到")
					// 进入页面给一个默认的目的省份的code 当触发点击事件后会被参数覆盖  此时this.arr3的值为data中的初始值0
					this.pcodeTo = this.provincArrTo[this.arr3].code;
					this.getCityTo();
				}
			});
		},
		// 点击目的省之后的picker监听事件
		provincChangeTo: function(e) {
			//说明用户选择的了
			if(e.detail&&e.detail.value || e.detail.value == 0){
				this.arr3 = e.detail.value;
				this.pcodeTo = this.provincArrTo[this.arr3].code;
				console.log(this.pcodeTo, "接收到此时的点击值")	
				// 点击目的省份的时候-->将目的省份的code传到目的市，此处调用目的市的接口（下边用this.变量名  就不用传参）
				this.getCityTo();  //this.getCityFrom(this.pcode)               	
			}else{
				this.pcodeTo = this.provincArrTo[0].code;
				this.getCityTo();  //this.getCityFrom(this.pcode)
				console.log(this.pcodeTo, "接收到此时的默认值")	
			}
		},
		// 获取目的市的接口
		getCityTo() {
			uni.request({
				url: 'http://epidemic.site.ximengnaikang.com/api/v1/area/provinces/' + this.pcodeTo,
				method: 'GET',
				header: {
					'Content-Type': 'application/json'
				},
				success: res => {
					this.cityArrTo = res.data.data;
					// 将点击过市之后的下标结束后每次都改为默认省会下标
					this.arr4 = 0;
					// 此处拿到目的市的默认名字显示在初始页面 此时this.arr4的值为data中的初始值0
					this.toName = this.cityArrTo[this.arr4].name;
					// 此处为点击省份之后,默认省会被选中的code传给getDetailes函数
					this.ccodeTo = this.cityArrTo[this.arr4].code;
					// 此处调用getDetailes函数是在目的市是省会时的懒操作配合上一行的代码使用
					this.getDetailes();
				}
			});
		},
		// 点击目的市之后的picker监听事件
		cityChangeTo: function(e) {
			// console.log(e.detail.value, '点击目的市按钮之后');
			if(e.detail&&e.detail.value){
				this.arr4 = e.detail.value;
				this.ccodeTo = this.cityArrTo[this.arr4].code;
				this.toName = this.cityArrTo[this.arr4].name;
			}else{
				this.ccodeTo = this.cityArrTo[0].code;
				this.toName = this.cityArrTo[0].name;
				console.log(this.ccodeTo, '能拿到目的市的code吗');
			}
			// 此函数要同时传入两个参数（一个出发市区，一个目的市区）此为目的市区
			this.flag1 = false;
			this.getDetailes();	
		},
		getDetailes() {
			uni.request({
				url: 'http://epidemic.site.ximengnaikang.com/api/v1/city/policy',
				method: 'POST',
				data: {
					city_code: this.ccodeTo,
				},
				header: {
					'Content-Type': 'application/json'
				},
				success: res => {
					this.policy = res.data.data;
					console.log(this.ccodeTo)
					console.log(this.policy, '拿到政策所有内容');
				}
			});
		},
		
	}
};
</script>

<style>
.container {
	width: 375px;
	height: 100vh;
	background-color: #f9f9fb;
}
.container .header {
	width: 100%;
	height: 198px;
}
.container .header {
	width: 375px;
	height: 198px;
}
.container .content {
	margin-top: -20px;
	width: 375px;
	height: 574px;
	/* height: 700px; */
	background-color: #ffffff;
	border-radius: 12px;
}
.container .content .h-header {
	text-align: center;
	padding: 15px 0;
}
.container .content .h-header text {
	width: 176px;
	height: 16px;
	font-size: 16px;
	font-family: Source Han Sans CN;
	font-weight: 500;
	line-height: 14px;
	color: #23459d;
}
.container .content .footer {
	height: calc(100%-50px);
	/* display: flex; */
	/* justify-content: space-between; */
	width: 345px;
	/* border: 1px solid black; */
	margin: 0 auto;
	/* box-sizing: border-box; */
}
.container .content .footer .blue {
	height: 36px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	margin-top: 15px;
	position: relative;
}
.container .content .footer .blue .first {
	width: 90px;
	height: 14px;
	font-size: 14px;
	font-family: Source Han Sans CN;
	font-weight: 500;
	line-height: 14px;
	color: #333333;
}

.container .content .footer .blue .second {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 110px;
	height: 36px;
	background: #f7f7f7;
	opacity: 1;
	border-radius: 4px;
	line-height: 36px;
}
.container .content .footer .blue .second text {
	width: 64px;
	height: 16px;
	font-size: 16px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 14px;
	color: #333333;
}
.container .content .footer .blue .third {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 110px;
	height: 36px;
	background: #f7f7f7;
	opacity: 1;
	border-radius: 4px;
	line-height: 36px;
}
.container .content .footer .blue .third text {
	width: 64px;
	height: 16px;
	font-size: 16px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 14px;
	color: #333333;
}

.container .content .footer .red {
	height: 36px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	margin-top: 15px;
}
.container .content .footer .red .first {
	width: 90px;
	height: 14px;
	font-size: 14px;
	font-family: Source Han Sans CN;
	font-weight: 500;
	line-height: 14px;
	color: #333333;
}
.container .content .footer .red .second {
	width: 110px;
	height: 36px;
	background: #f7f7f7;
	opacity: 1;
	border-radius: 4px;
	line-height: 36px;
    display: flex;
	justify-content: center;
	align-items: center;
}
.container .content .footer .red .second text {
	width: 64px;
	height: 16px;
	font-size: 16px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 14px;
	color: #333333;
}

.container .content .footer .red .third {
	width: 110px;
	height: 36px;
	background: #f7f7f7;
	opacity: 1;
	border-radius: 4px;
	line-height: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.container .content .footer .red .third text {
	width: 64px;
	height: 16px;
	font-size: 16px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 14px;
	color: #333333;
}

.container .content .footer .location {
	/* margin: 0 3px; */
	width: 12px;
	height: 13px;
}
.container .content .footer .down {
	width: 32upx;
	height: 20upx;
	margin-top: 6rpx;
	margin-left: 6rpx;
}
.container .content .footer .ico {
	margin-right: 12rpx;
	width: 15px;
	height: 15px;
}
.container .content .footer .route {
	margin-top: 15px;
	height: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}
.container .content .footer .route .left {
	font-size: 14px;
	font-family: Source Han Sans CN;
	font-weight: 500;
	line-height: 14px;
	color: #333333;
	display: flex;
	justify-content: center;
	align-items: center;
}
.container .content .footer .route .right {
	/* width: 61px;
		height: 14px; */
	font-size: 14px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 14px;
	color: #333333;
	position: absolute;
	margin-top: 2px;
	right: 5px;
}
.container .content .footer .route .right-true {
	font-size: 14px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 14px;
	color: #333333;
	position: absolute;
	margin-top: 2px;
	right: 80px;
}
.container .content .footer .route .right-trues {
	font-size: 14px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 14px;
	color: #333333;
	/* position: absolute;
	margin-top: 2px;
	right: 70px; */
}
.container .content .footer .route .special {
	font-size: 14px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 14px;
	color: #333333;
	position: absolute;
	margin-top: 2px;
	right: 60px;
	/* margin-left: 10px; */
}
.container .content .footer .time {
	margin-top: 15px;
	/* height: 15px; */
	display: flex;
	justify-content: space-between;
	line-height: 15px;
	align-items: center;
	position: relative;
}
.container .content .footer .time .left {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	font-family: Source Han Sans CN;
	font-weight: 500;
	line-height: 14px;
	color: #333333;
}
.container .content .footer .time .right {
	font-size: 14px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 14px;
	color: #333333;
	margin-top: 2px;
	position: absolute;
	right: 5px;
}
.container .content .footer .gl {
	margin-top: 15px;
	/* height: 15px;
		line-height: 15px; */
}
.container .content .footer .gl .left {
	display: flex;
	align-items: center;
	font-size: 14px;
	font-family: Source Han Sans CN;
	font-weight: 500;
	line-height: 14px;
	color: #333333;

}
.detail {
	width: 345px;
	height: 93px;
	background: #f7f7f7;
	opacity: 1;
	border-radius: 4px;
	margin: 15px auto;
	display: flex;
	align-items: center;
	flex-direction: column;
	position: relative;
}
.detail .neirong {
	width: 316px;
	height: 60px;
	font-size: 14px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 21px;
	color: #333333;
	margin-top: 10px;
}
.detail .details{
	width: 316px;
	height: 60px;
	font-size: 14px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 21px;
	color: #333333;
	margin-top: 6px;
	/* overflow: hidden; */
	overflow: hidden; /*隐藏溢出的文本  */
	text-overflow: ellipsis;
	word-break: break-all;/*自动换行*/
	-webkit-line-clamp:3; /*显示的行数*/
	-moz-box-orient: vertical; /*从上到下自动排列子元素*/
	-webkit-box-orient: vertical; 
	display: -webkit-box ;
	text-align: justify;
	text-align-last: justify;
}
.detail .cha {
	/* width: 72px;
		height: 14px; */
	font-size: 14px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 14px;
	color: #23459d;
	position: absolute;
	text-align: end;
	margin-left: 260px;
	margin-top: 70px;
}
.show {
	margin-top: 10px;
	width: 345px;
	height: 36px;
	background: rgba(255,102,0, 0.1);
	/* opacity: 0.1; */
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ff6600;
	margin: 0 auto;
}
.show text{
	/* width: 287px;
		height: 12px; */
	font-size: 12px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 14px;
	opacity: 1 ;
	color: #FF6600;
}
.mianze {
	width: 345px;
	height: 30px;
	font-size: 12px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 18px;
	color: #999999;
	margin: 20px auto;
}
.my-footer {
	position: fixed;
	bottom: 0;
	width: 375px;
	height: 50px;
	background: #ffffff;
	border: 1px solid #eeeeee;
	display: flex;
	justify-content: space-around;
	text-align: center;
	align-items: center;
}
.my-footer .share {
	width: 130px;
	height: 40px;
	background: #23459d;
	opacity: 1;
	border-radius: 20px;
	line-height: 40px;
	color: #ffffff;
}
.my-footer .require {
	width: 130px;
	height: 40px;
	background: #23459d;
	opacity: 1;
	border-radius: 20px;
	line-height: 40px;
	color: #ffffff;
}
</style>
